<template>
<div>
  <div v-if="manualConceal" class="title">
    <p class="xuanze">请选择证书录入方式</p>
    <el-row class="row-s" :gutter="10">
      <!-- 智能 -->
      <!-- <el-col class="entering-intelligent" :span="7">
        <div class="in-t">
        <div class="i-con clearfix"></div>
        <p class="p-txt">证书图片智能识别录入</p>
        </div>
        <el-card class="intelligent-card" shadow="hover">
          <i class="el-icon-camera-solid tubiao"></i>
          <div>
          <el-upload
            class="upload-intelligent"
            :headers="myHeader"
            :limit="limitNum"
            accept=".png,.jpg,.pdf"
            :action="uploadUrls()"
            ref="refcertiUpload"
            :before-upload="beforeAvatarUpload"
            :on-error="onError"
            :on-success="onSuccess"
            :on-progress="onProgress"
            >
            <el-button class="el-upload__text">点击上传</el-button>
          </el-upload>
          </div>
          <p class="tishi">自动识别，格式：jpg、png、pdf ！图片大小不得超过1.5M ！</p>
        </el-card>
      </el-col> -->

      <el-col class="entering-intelligent" :span="7">
        <div class="in-t">
        <div class="i-con clearfix"></div>
        <p class="p-txt">证书图片智能识别录入</p>
        </div>
        <!-- 批量导入 -->
        <el-card class="batch-card" shadow="hover">
          <h5 class="xiazai">1、单个智能识别录入</h5>

        <el-card class="intelligent-card" shadow="hover">
          <i class="el-icon-camera tubiao"></i>
          <div>
          <!-- 智能添加的el-upload -->
          <el-upload
            class="upload-intelligent"
            :headers="myHeader"
            :limit="limitNum"
            accept=".png,.jpg,.pdf"
            :action="uploadUrls()"
            ref="refcertiUpload"
            :before-upload="beforeAvatarUpload"
            :on-error="onError"
            :on-success="onSuccess"
            :on-progress="onProgress"
            >
            <el-button v-if="isAuth('certificate:certificateInfo:save')" class="el-upload__text">点击上传</el-button>
          </el-upload>
          <!-- 智能添加的el-upload结束 -->
          </div>
          <p class="tishi">自动识别，格式：jpg、png、pdf ！图片大小不得超过1.5M ！</p>
        </el-card>
          <!-- 批量匹配开始 -->
          <h5 class="xiazai piliangshibie">2、批量智能识别录入</h5>
          <el-card class="matching" shadow="hover">
          <i class="el-icon-files tubiao"></i>
          <div>
            <el-button @click="piliangcenterDialogVisibleA = true" v-if="isAuth('certificate:certificateInfo:save')" class="shangchuan">点击上传</el-button>
            </div>
            <p class="tishis">批量智能识别录入，单个图片大小不可超过2M!</p>
          </el-card>
          <!-- 批量匹配结束 -->
        </el-card>
      </el-col>

      <!-- 手动 -->
      <el-col class="entering-manual" :span="7">
        <div class="in-t">
        <div class="i-con clearfix"></div>
        <p class="p-txt">手动录入</p>
        </div>
        <el-card class="manual-card" shadow="hover">
          <i class="el-icon-edit tubiao"></i>
          <div>
            <el-button v-if="isAuth('certificate:certificateInfo:save')" @click="clickManualConceal()" class="shangchuan">手动添加</el-button>
          </div>
          <p class="tishi">手动添加证书人员信息</p>
        </el-card>
      </el-col>
      <!-- 批量 -->
      <el-col class="entering-batch" :span="8">
        <div class="in-t">
        <div class="i-con clearfix"></div>
        <p class="p-txt">批量录入</p>
        </div>
        <!-- 批量导入 -->
        <el-card class="batch-card" shadow="hover">
          <h5 class="xiazai">1、导入xlsx文件进行批量上传</h5>
          <div class="div-card-s">
          <el-button class="el-template" @click="clickTemplate()" icon="el-icon-download">在职/非在职模板下载</el-button>
          <el-button class="el-templates" @click="clickTemplates()" icon="el-icon-download">挂靠表格模板下载</el-button>
          </div>

          <el-card class="choice" shadow="hover">
            <i class="el-icon-document-add tubiao"></i>
            <div>
            <el-upload
            :limit="1"
            :headers="myHeader"
            ref="certiUpload"
            accept=".xlsx"
            :action="uploadUrl()"
            :before-upload="beforeUploadFile"
            :on-change="fileChange"
            :on-exceed="exceedFile"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="fileList"
            >
          <el-button v-if="isAuth('certificate:certificateInfo:save')" class="el-upload__text dianjipiliang">点击上传</el-button>
          <!-- <div class="el-upload__tip" slot="tip">只能上传xlsx文件，且不超过10M</div> -->
        </el-upload>
            </div>
            <p class="tishis">根据下载的模板来完善表格内容，大小不超过10M！支持格式：xlsx</p>
          </el-card>
          <!-- 批量匹配开始 -->
          <h5 class="xiazai">2、批量导入证书图片进行智能匹配</h5>
          <el-card class="matching" shadow="hover">
          <i class="el-icon-money tubiao"></i>
          <div>
            <el-button @click="piliangcenterDialogVisible = true" v-if="isAuth('certificate:certificateInfo:save')" class="shangchuan">点击上传</el-button>
            </div>
            <p class="tishis">图片批量关联证书，单个图片大小不可超过2M!</p>
          </el-card>
          <!-- 批量匹配结束 -->
        </el-card>
      </el-col>
    </el-row>
  <el-dialog
  title="证书图片批量匹配结果"
  :visible.sync="matchingDialogVisible"
  width="50%"
  center>
  <span>
  <div class="consequence">
    <div class="consequence-s">
     <div>
       <i class="el-icon-success chenggong"></i>{{this.success}}人导入成功
       </div>
    </div>
    <div class="consequence-e">
    <div>
      <i class="el-icon-error shibai"></i>{{this.fail}}人导入失败
      </div>
    </div>
  </div>
  <div>
    <el-table
    :data="tableData"
    height="350"
    border
    style="width: 100%">
    <el-table-column
    align="center"
      type="index"
      header-align="center"
      label="#"
      width="40">
    </el-table-column>
    <el-table-column
      prop="fileName"
      header-align="center"
      align="center"
      label="图片名称">
    </el-table-column>
    <el-table-column
      prop="msg"
      header-align="center"
      align="center"
      label="失败原因">
    </el-table-column>
    <el-table-column
      prop="filePath"
      label="查看"
      header-align="center"
      align="center"
      width="100">
      <template slot-scope="scope">
        <div>
          <el-button @click="onPreview(scope.row)">预览</el-button>
        <el-image-viewer
                     v-if="showViewer"
                     :on-close="closeViewer"
                     :url-list="[url]" />
        </div>
      </template>
    </el-table-column>
  </el-table>
  </div>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="matchingDialogVisible = false">关 闭</el-button>
  </span>
</el-dialog>
<!-- 证书匹配结果 -->
<!-- 批量导入证书返回结果 -->
<el-dialog
  title="证书批量录入返回结果"
  :visible.sync="transactionDialogVisible"
  width="50%"
  center>
  <span>
  <div class="consequence">
    <div class="consequence-s">
     <div>
       <i class="el-icon-success chenggong"></i>{{this.success}}人导入成功
       </div>
    </div>
    <div class="consequence-e">
    <div>
      <i class="el-icon-error shibai"></i>{{this.fail}}人导入失败
      </div>
    </div>
  </div>
  <div>
    <el-table
    :data="dataRes"
    height="350"
    border
    style="width: 100%">
    <el-table-column
    align="center"
      type="index"
      header-align="center"
      label="#"
      width="40">
    </el-table-column>
    <el-table-column
      prop="name"
      header-align="center"
      align="center"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="idCard"
      header-align="center"
      align="center"
      label="身份证号">
    </el-table-column>
    <el-table-column
      prop="certificateNo"
      header-align="center"
      align="center"
      label="证书编号">
    </el-table-column>
    <el-table-column
      prop="msg"
      header-align="center"
      align="center"
      label="失败原因">
    </el-table-column>
  </el-table>
  </div>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogClose">关 闭</el-button>
  </span>
</el-dialog>
<!-- 证书匹配批量上传 s-->
  <el-dialog
  title="证书批量匹配"
  :visible.sync="piliangcenterDialogVisible"
  width="30%"
  center>
  <span style="text-align: center;">
  <el-upload
    drag
    class="upload-demt"
    accept=".png,.jpg,.jpeg"
    ref="uploadFile"
    name="filedatas"
    :limit="50"
    :on-error="onFiledatas"
    :on-exceed="exceedMatching"
    :headers="myHeader"
    :action="uploadMatching()"
    :auto-upload="false"
    multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">上传数量限制为50个！</div>
</el-upload>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="piliangcenterDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sendDynamic">导 入</el-button>
  </span>
</el-dialog>
<!-- 证书匹配批量上传 e-->

<!-- 证书批量智能上传 -->
  <el-dialog
  title="批量匹配识别录入"
  :visible.sync="piliangcenterDialogVisibleA"
  width="40%"
  >
   <span style="text-align: center;">

     <div class="div-er">
      <el-form :model="arrList" ref="dataForm" label-width="80px">
          <el-row>
              <el-col :span="8">
                  <el-form-item label="录入类型" prop="certificateType">
                    <el-select v-model="arrList.certificateType" style="width:100%">
                      <el-option
                        v-for="item in certificateTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                      </el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="16">
                  <el-form-item label="保管人" prop="keepUserId">
                    <el-tree-select
                      style="width:50%"
                      class="tree-selects"
                      :data="treeData"
                      v-model="arrList.keepDeptId"
                      node-key="id"
                      placeholder="请选择保管人部门"
                      :clearable="true"
                      @change="keepDeptChange"
                      ref="casc"
                    />
                    <el-select v-model="arrList.keepUserId" @change="employeesChange" filterable placeholder="请选择保管人" style="width:48%">
                      <el-option
                        v-for="item in employees"
                        :key="item.id"
                        :clearable="true"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
      </el-form>
     </div>

  <el-upload
    drag
    class="upload-demt"
    accept=".png,.jpg,.jpeg"
    ref="uploadFileA"
    name="filedatas"
    :limit="20"
    :on-error="onFiledatasA"
    :on-exceed="exceedMatchingA"
    :headers="myHeader"
    :action="uploadMatchingA()"
    :auto-upload="false"
    :on-change="changeList"
    :before-upload="uploadFileE"
    multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">上传数量限制为20个！</div>
</el-upload>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="piliangcenterDialogVisibleA = false">取 消</el-button>
    <el-button type="primary" @click="smartImport">导 入</el-button>
  </span>
</el-dialog>
<!--  -->
  </div>
  <!-- 手动添加的组件 -->
  <certificate-manual :isField="isField" :img="img" :dateFrom="dateFrom" v-if="manualConcealppp" @routerBack="routerBack"></certificate-manual>
  <manual-add @clickMe="clickMe" v-if="manualaddVisible" :dataArrList="dataArrList" :arrList="arrList" :pink="pink"></manual-add>
</div>
</template>
<script>
import CertificateManual from './certinfo/certificate-manual'
import ManualAdd from './certinfo/manual-add'
import ElTreeSelect from '@/components/treeSelect/index.vue'
import EditableCell from '@/components/edit-table-cell/EditableCell'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import * as imageConversion from 'image-conversion'
import { eventBus } from '../../../../eventBus'
import { Loading } from 'element-ui'
import Vue from 'vue'
export default {
  data () {
    return {
      uploadObj: {},
      arrList: {
        certificateType: 1,
        keepDeptId: '',
        keepUserId: ''
      },
      pink: {},
      certificateTypes: [],
      treeData: [],
      employees: [],
      dataArrList: {},
      transactionDialogVisible: false,
      manualConcealppp: false,
      manualaddVisible: false,
      piliangcenterDialogVisible: false,
      piliangcenterDialogVisibleA: false,
      dialogVisibleIntelligent: false,
      manualConceal: true,
      kiveList: false,
      matchingDialogVisible: false,
      queryModelVisible: false,
      editModeEnabled: true,
      dialogVisible: false,
      showViewer: false, // 显示查看器
      url: '',
      multiple: false,
      isField: true,
      resAvatarFile: '',
      certificateinfoCrashVisible: false,
      dialogConformVisible: false,
      flag: false,
      certificateTypes: [{
        value: 1,
        label: '在职员工证书'
      }, {
        value: 2,
        label: '兼职证书'
      }],
      academics: [{
        value: '博士',
        label: '博士'
      }, {
        value: '硕士',
        label: '硕士'
      }, {
        value: '本科',
        label: '本科'
      }, {
        value: '专科',
        label: '专科'
      }, {
        value: '高职高专',
        label: '高职高专'
      }, {
        value: '中专',
        label: '中专'
      }, {
        value: '高中',
        label: '高中'
      }, {
        value: '初中',
        label: '初中'
      }, {
        value: '小学',
        label: '小学'
      }, {
        value: '其他',
        label: '其他'
      }],
      registerTypes: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }, {
        value: 2,
        label: '非注册类证书'
      }],
      certificateTypes: [{
        value: 1,
        label: '在职员工'
      }, {
        value: 2,
        label: '挂靠'
      }, {
        value: 3,
        label: '非在职员工'
      }
      ],
      candidatesSources: [{
        value: 1,
        label: '个人'
      }, {
        value: 2,
        label: '企业'
      }],
      uploadTypes: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      activeName: 'threejob',
      chartData: {
        columns: ['type', 'num'],
        rows: []
      },
      waterfallData: {
        columns: ['type', 'num'],
        rows: []
      },
      chartExtend: {
        color: ['#07AB6E', '#E83E25', '#1B92FB', '#FC8E2D']
      },
      histogramExtend: {
        color: ['#E83E25', '#07AB6E']
      },
      loading: true,
      dataEmpty: true,
      editableTabs: [],
      index: 0,
      params: {},
      limitNum: 1,  // 上传excell时，同时允许上传的最大数
      fileList: [],   // excel文件列表
      dxList: [],
      dataRes: [],
      jobs: [],
      jobName: '',
      confInfos: [],
      professions: [],
      currentRow: {},
      dateFrom: {
        // dateUrl:true
      },
      onLoading: false,
      img: [],
      propArr: [],
      fileData: '',
      tableData: [],
      imageConversion: null,
      success: '',
      fail: ''
    }
  },
  components: {
    CertificateManual, EditableCell, ElImageViewer, ElTreeSelect, ManualAdd
  },
  mounted () {
    eventBus.$on('certificateinfoadd', (msg) => {
      this.kiveList = msg
      this.clickKive()
    })
  },
  computed: {
    myHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
    }
  },
  watch: {
    // 区别 智能和手动 打开的手动录入
    manualConceal: {
      handler (val) {
        if (val) {
          this.dateFrom = {}
          this.img = []
        }
      }
    }
  },
  created () {
    this.initOrgTree()
    this.keepDeptChange()
  },
  methods: {
    clickMe () {
      this.manualaddVisible = false
      this.manualConceal = true
    },
    initOrgTree () {
      this.$http({
        url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
        method: 'get',
        params: {}
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.treeData = [data.deptInfo]
            // 默认保管人
            // this.dataForm.keepDeptId = this.treeData[0].children[0].id
        } else {
          this.treeData = []
        }
      })
    },
    keepDeptChange (id, item) {
        // this.employees = []
        // this.dataForm.keepUserId = ''
      this.$http({
        url: this.$http.adornUrl('/certificate/employeeInfo/list'),
        method: 'get',
        params: this.$http.adornParams({
          'filterFlag': 0,
          'deptId': id,
          'page': 1,
          'limit': 1000,
          'status': 1
        })
      }).then(({data}) => {
        if (data.code == 0) {
          this.employees = data.page.list
            // 默认保管部门
          if (!this.dataListForm) {
            // this.dataForm.keepUserId = data.page.list[0].id
          } else {
              // this.dataForm.keepUserId = this.dataListForm.keepUserId
          }
        }
      })
    },
    employeesChange (item) {
      this.$http({
        url: this.$http.adornUrl('/certificate/employeeInfo/info/' + item),
        method: 'get'
      }).then(({data}) => {
        if (data.code == 0) {
          this.pink = data.e
          // console.log(this.pink);
          this.arrList.keepDeptId = data.e.deptId
        }
      })
      this.arrList.keepDeptId = item.deptId
    },
    onPreview (row) {
      this.showViewer = true
      this.url = row.filePath
    },
        // 关闭查看器
    closeViewer () {
      this.showViewer = false
    },
    //  loading
    onProgress () {
      this.onLoading = Loading.service({
        fullscreen: true,
        text: '识别中，请稍后...'
      })
    },
    clickKive () {
      if (this.kiveList) {
        this.manualConceal = true
        this.manualaddVisible = false
        this.manualConcealppp = false
      }
    },
    // 手动添加
    clickManualConceal () {
      this.manualConceal = false
      this.manualConcealppp = true
      this.isField = true
    },
    dialogClose () {
      this.transactionDialogVisible = false
      this.queryAll()
    },
    routerBack () {
      this.manualConceal = true
      this.manualConcealppp = false
    },
    // 上传智能的路径
    uploadUrls () {
      return this.$http.adornUrl(`/certificate/certificateInfo/AIRecognize`)
    },
    // 智能识别上传失败
    onError (err, file, fileList) {
      this.$message.error('上传失败，请重试...')
      this.$refs.refcertiUpload.clearFiles()
    },
    onFiledatas (err, file, fileList) {
      this.$message.error('上传失败，请重试...')
      this.$refs.uploadFile.clearFiles()
    },
    onFiledatasA (err, file, fileList) {
      this.$message.error('上传失败，请重试...')
      this.$refs.uploadFileA.clearFiles()
    },
    // 智能识别上传成功，数据接收到dateFrom
    onSuccess (response, file, fileList) {
        // console.log(file)
        // console.log(response.code)
        // console.log(fileList)
      if (response.code === 0) {
        fileList.forEach(val => {
          this.img.push({
            // name: val.response.data.fileName,
            url: val.response.data.remoteUrl + val.response.data.fileName
          })
        })
        this.onLoading.close()
        // this.$message.success("上传成功")
        this.dateFrom = response.data
        this.manualConceal = false
        this.manualConcealppp = true
        this.isField = false
        this.$refs.refcertiUpload.clearFiles()
      } else {
        this.onLoading.close()
        this.$message.error(response.msg)
        this.$refs.refcertiUpload.clearFiles()
      }
    },
    // 智能识别图片大小限制为2M
    beforeAvatarUpload (file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isLt2M = file.size / 1024 / 1024 < 1.5
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 1.5MB!',
          type: 'warning'
        })
      }
      return isLt2M
    },
    // 智能匹配
    uploadMatching () {
      return this.$http.adornUrl(`/certificate/certificateInfo/batchMatchAIRecognize`)
    },
    uploadMatchingA () {
      return this.$http.adornUrl(`/certificate/certificateInfo/batchMatchAIRecognize`)
    },
    uploadFoot (file) {
      this.fileData.append('files', file.file)  // append  增加数据
      console.log(this.uploadObj)
    },
    sendPics () {
      this.fileData = new FormData()
      this.$refs['manual'].submit()
      // this.fileData.append('')
    },
    // 批量匹配
    sendDynamic () {
      let {uploadFiles, action, data} = this.$refs.uploadFile
      let form = new FormData()
      // 文件对象
      uploadFiles.map(file => form.append('files', file.raw))
      // 附件参数
      for (let key in data) {
        form.append(key, data[key])
      }
      this.$http({
        url: this.$http.adornUrl('/certificate/certificateInfo/batchMatchAIRecognize'),
        method: 'post',
        headers: {
          'Content-type': 'multipart/form-data', 'token': Vue.cookie.get('token')
        },
        data: form,
        showLoading: true
      }).then(({data}) => {
        // console.log(data)
        this.success = data.success
        this.fail = data.fail
        this.tableData = data.data
        // console.log(this.tableData);
        this.matchingDialogVisible = true
        this.$refs.uploadFile.clearFiles()
      })
    },

    dataURItoBlob (dataURI, type) {
      var binary = atob(dataURI.split(',')[1])
      var array = []
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i))
      }
      return new Blob([new Uint8Array(array)], {type: type})
    },

    uploadFileE (file) {
      return new Promise((resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 4 // 判定图片大小是否小于4MB
        if (isLt2M) {
          resolve(file)
        }
        console.log(file) // 压缩到400KB,这里的400就是要压缩的大小,可自定义
        imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
          resolve(res)
          this.imageConversion = res
        })
      })
    },

    changeList (file, fileList) {
    // return new Promise((resolve) => {
		// 	imageConversion.compressAccurately(file.raw, 100).then(res => {
		// 		resolve(res);
    //     console.log(res);
		// 	});
		// })

      return new Promise((resolve) => {
        imageConversion.compressAccurately(file.raw, 100).then(res => {
          resolve(res)
          console.log(res)
          console.log(fileList)
        })
      })
    },

    smartImport () {
      if (this.arrList.keepDeptId == '') {
        this.$message.error('请选择保管人')
        return
      }
      if (this.arrList.keepUserId == '') {
        this.$message.error('请选择保管人')
        return
      }

      let {uploadFiles, action, data} = this.$refs.uploadFileA

      var counter = uploadFiles.length - 1
      new Promise((resolve) => {
        uploadFiles.forEach((i, index) => {
          if (i.size > 248722) {
			  imageConversion.compressAccurately(i.raw, 250).then(res => {
    i.raw = new window.File([res], i.name, { type: i.raw.type })
    console.log(i.raw)
    if (counter === index) {
      resolve(uploadFiles)
    }
  })
          } else {
            if (counter === index) {
              resolve(uploadFiles)
            }
          }
        })
		  }).then(i => {
    let form = new FormData()
            // 文件对象
    uploadFiles.map(file => form.append('files', file.raw))
            // 附件参数
    for (let key in data) {
      form.append(key, data[key])
    }
    this.$http({
      url: this.$http.adornUrl('/certificate/certificateInfo/AIRecognize/batch'),
      method: 'post',
      headers: {
        'Content-type': 'multipart/form-data', 'token': Vue.cookie.get('token')
      },
      data: form,
      showLoading: true
    }).then(({data}) => {
      if (data.code == 0) {
        this.dataArrList = data.data
        this.$refs.uploadFileA.clearFiles()
        this.manualConceal = false
        this.manualaddVisible = true
      }
    })
  })
    },
    exceedMatching (files, fileList) {
      this.$message.warning(`只能选择50个文件，当前共选择了 ${files.length + fileList.length} 个`)
    },
    exceedMatchingA (files, fileList) {
      this.$message.warning(`只能选择20个文件，当前共选择了 ${files.length + fileList.length} 个`)
    },
      // 删除
    handleDelete (index, row) {
      if (this.dxList[index]) {
        this.dxList.splice(index, 1)
      }
    },
    handleAdd () {
      this.dxList.unshift({
        academic: '',
        borrowCandidatesSources: '',
        borrowContact: '',
        borrowContactMobile: '',
        borrowEndTime: '',
        borrowOrgName: '',
        borrowTime: '',
        certificateNo: '',
        certificateType: '',
        confType: '',
        idCard: '',
        remark: '',
        name: '',
        mobile: ''
      })
    },
    openDetails (row, event, column) {
      this.currentRow = row
    },
    jobChange () {
      this.confInfos = []
      this.professions = []
      this.currentRow.idType = ''
      this.currentRow.profession = ''
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
            'type': this.currentRow.confType
          })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.confInfos = data
          }
        })
      })
    },
    currentChange (currentRow, oldCurrentRow) {
        /* if(oldCurrentRow){
          this.confInfos = []
          this.professions = []
        }
        this.currentRow = currentRow; */
    },
    confChange () {
      this.professions = []
      this.currentRow.profession = ''
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
            'type': this.currentRow.idType
          })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.professions = data
          }
        })
      })
    },
    // 文件超出个数限制时的钩子
    exceedFile (files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
    },
      // 文件状态改变时的钩子
    fileChange (file, fileList) {
      this.fileList.push(file.raw)
    },
    beforeUploadFile (file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          type: 'warning'
        })
      }
      return isLt10M
    },
    handleSuccess (res, file, fileList) {
      console.log(res)
      if (res.code === 0) {
        console.log(res)
        this.dxList = res.dxList
        this.dataFormSubmit()
        // this.$message.success('文件上传成功')
        this.$refs.certiUpload.clearFiles()
      } else {
          // this.$message.error(data.msg)
        this.handleError()
      }
    },
    handleError (err, file, fileList) {
      this.$message.error('文件上传失败，请检查模板或重新操作')
      this.$refs.certiUpload.clearFiles()
    },
    uploadUrl () {
      return this.$http.adornUrl(`/certificate/certificateInfo/import`)
    },
      // uploadFile () {
      //   if (this.fileList.length === 0) {
      //     this.$message.warning('请上传文件')
      //   } else {
      //     let form = new FormData()
      //     form.append('file', this.fileList[0])
      //     this.$http({
      //       url: this.$http.adornUrl('/certificate/certificateInfo/import'),
      //       method: 'post',
      //       headers: {
      //         'Content-type': 'multipart/form-data', 'token': Vue.cookie.get('token')
      //       },
      //       data: form,
      //       showLoading: true
      //     }).then(({data}) => {
      //       if (data && data.code === 0) {
      //         if (data.dxList && data.dxList.length > 0) {
      //           this.dialogConformVisible = true
      //           this.dxList = data.dxList
      //           this.dataFormSubmit()
      //         } else {
      //           this.$message.error('批量上传无内容')
      //         }
      //       } else {
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }
      // },
    // 模板下载
    clickTemplate () {
      window.location.href = window.SITE_CONFIG.remoteUrl + 'others/certi-Template.xlsx'
    },
    clickTemplates () {
      window.location.href = window.SITE_CONFIG.remoteUrl + 'others/certiBorrowIn-Template.xlsx'
    },
    // 批量导入
    dataFormSubmit () {
      this.$http({
        url: this.$http.adornUrl('/certificate/certificateInfo/batchImport'),
        method: 'post',
        data: this.$http.adornData({ 'certificateInfos': this.dxList })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dxList = []
          this.dialogConformVisible = false
          this.fileList = []
          this.dataRes = data.data
          this.fail = data.fail
          this.success = data.success
          this.dialogVisible = false
          this.transactionDialogVisible = true
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.$nextTick(() => {
                this.$refs.child[this.index].getDataList()
              })
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
      // })
    }
  }
}
</script>
<style scoped lang="scss">
.div-er{
  width: 100%;
  height: 85px;
  // background-color: #09AB6E;
}
/deep/.tree-selects{
  height: 36px !important;
  .el-input{
    .el-input__inner{
      height: 36px !important;
    }
  }
}
/deep/
.el-dialog{
.el-dialog__header{
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
.el-dialog__title{
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 20px !important;
}
}
}
.mod-config{
  width: 100%;
  height: 100% !important;
  // margin-top: 48px;
  overflow-y: scroll;
  overflow-x:hidden;
  background-color: #ffffff;
  // height: 700px;
}
.title {
  width: 100%;
  min-height: 100% !important;
  background-color: #ffffff;
  .xuanze {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 1.17em;
    font-weight: 700;
    color: #333333;
  }
  .consequence{
    width: 100%;
    background-color: aqua;
    height: 60px;
    text-align: center;
    background-color: #FAFAFAFF;
    .consequence-s{
    div{
      height: 15px;
      margin-top: 15px;
    }
    .chenggong{
    width: 20px;
    color: #09AB6E;
    margin-right: 10px;
    }
    float: left;
     width: 50%;
     height: 60px;
     font-size: 15px;
     border: 1px solid #ccc;
    text-align: center;
    }
    .consequence-e{
      div{
      height: 15px;
      margin-top: 15px;
    }
    .shibai{
    width: 20px;
    color: red;
    margin-right: 10px;
      }
     float: left;
     width: 50%;
     height: 60px;
     text-align: center;
     font-size: 15px;
     border: 1px solid #ccc;
    }
  }
  .row-s {
    margin-top: 15px;
    // height: 700px;
    height: 100%;
    // 智能
    .entering-intelligent {
      margin-left: 40px;
      height: 280px;
      .in-t{
        height: 16px;
      }
      .piliangshibie{
        margin-top: 20px;
      }
      .i-con {
        width: 4px;
        height: 16px;
        float: left;
        background: #6E92E9;
      }
      .p-txt {
        width: 161px;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 400;
        color: #333333;
      }
              .xiazai {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
      // 点击图片
      .intelligent-card {
        margin-top: 20px;
        height: 240px;
        padding: 20px;
        background-color: #f8f9fa;
        text-align: center;
        .tubiao {
          margin-top: 10px;
          padding-bottom: 15px;
          font-size: 64px;
          color: #6E92E9;
        }
        .shangchuan {
          margin-bottom: 5px;
        }
        .tishi {
          margin-top: 15px;
          padding-bottom: 32px;
          font-size: 10px;
          font-weight: 400;
          color: #999999;
          line-height: 26px;
        }
      }
      .batch-card {
        padding: 20px;
        margin-top: 20px;
        background-color: #f8f9fa;
        .xiazai {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .tishi {
          margin-top: 5px;
          margin-left: 30px;
          font-size: 10px;
          font-weight: 400;
          color: #999999;
        }
        .div-card-s{
          width: 100%;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .el-template {
          width: 160px;
          height: 36px;
          // margin-top: 5px;
          // margin-left: 80px;
          // margin-bottom: 5px;
          font-size: 13px;
          background-color: #ffffff;
        }
        .el-templates{
          width: 160px;
          height: 36px;
          // margin-top: 5px;
          margin-left: 80px;
          // margin-bottom: 5px;
          font-size: 13px;
          background-color: #ffffff;
        }
        .choice {
          height: 210px;
          margin-top: 10px;
          margin-bottom: 10px;
          background-color: #F5F7FA;
          text-align: center;
          .tishis {
            font-size: 10px;
            margin-top: 14px;
            font-weight: 400;
            color: #999999;
          }
          .shangchuan {
            margin-bottom: 10px;
          }
          .tubiao {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 64px;
            color:#6E92E9;
          }
        }
        .matching{
          height: 210px;
          margin-top: 20px;
          margin-bottom: 10px;
          text-align: center;
          background-color: #F5F7FA;
          .tishis {
            font-size: 10px;
            margin-top: 4px;
            font-weight: 400;
            color: #999999;
          }
          .shangchuan {
            margin-bottom: 10px;
          }
          .tubiao {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 64px;
            color: #6E92E9;
          }
        }
      }
    }
    .title .row-s .entering-intelligent .intelligent-card{
      background-color: #ffffff !important;
    }
    // 手动
    .entering-manual {
      margin-left: 10px;
      height: 280px;
      // background-color: #f8f9fa;
      .in-t{
        height: 16px;
      }
      .i-con {
        width: 4px;
        height: 16px;
        float: left;
        background: #6E92E9;
      }
      .p-txt {
        width: 161px;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 400;
        color: #333333;
      }
      // 点击图片
      .manual-card {
        margin-top: 20px;
        height: 240px;
        padding: 20px !important;
        background-color: #f8f9fa;
        text-align: center;
        .tishi {
          font-size: 10px;
          padding-top: 0px;
          padding-bottom: 35px;
          font-weight: 400;
          color: #999999;
        }
        .shangchuan {
          margin-bottom: 15px;
        }
        .tubiao {
          margin-top: 20px;
          margin-bottom: 15px;
          font-size: 64px;
          color: #6E92E9;
        }
      }
    }
    // 批量
    .entering-batch {
      margin-left: 10px;
      margin-bottom: 70px;
      height: 100%;
      .in-t{
        height: 16px;
      }
      .i-con {
        width: 4px;
        height: 16px;
        float: left;
        background: #6E92E9;
      }
      .p-txt {
        width: 161px;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 400;
        color: #333333;
      }
      // 点击图片
      .batch-card {
        padding: 20px;
        margin-top: 20px;
        background-color: #f8f9fa;
        .xiazai {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .tishi {
          margin-top: 5px;
          margin-left: 30px;
          font-size: 10px;
          font-weight: 400;
          color: #999999;
        }
        .div-card-s{
          width: 100%;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .el-template {
          // width: 160px;
          height: 36px;
          // margin-top: 5px;
          // margin-left: 80px;
          // margin-bottom: 5px;
          font-size: 13px;
          background-color: #ffffff;
        }
        .el-templates{
          // width: 160px;
          height: 36px;
          // margin-top: 5px;
          margin-left: 80px;
          // margin-bottom: 5px;
          font-size: 13px;
          background-color: #ffffff;
        }
        .choice {
          height: 210px;
          margin-top: 10px;
          margin-bottom: 10px;
          background-color: #F5F7FA;
          text-align: center;
          .tishis {
            font-size: 10px;
            margin-top: 14px;
            font-weight: 400;
            color: #999999;
          }
          .shangchuan {
            margin-bottom: 10px;
          }
          .tubiao {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 64px;
            color:#6E92E9;
          }
        }
        .matching{
          height: 210px;
          margin-top: 20px;
          margin-bottom: 10px;
          text-align: center;
          background-color: #F5F7FA;
          .tishis {
            font-size: 10px;
            margin-top: 4px;
            font-weight: 400;
            color: #999999;
          }
          .shangchuan {
            margin-bottom: 10px;
          }
          .tubiao {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 64px;
            color: #6E92E9;
          }
        }
      }
    }
  }
}
.upload-intelligent{
  text-align: center;
}
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>
